<template>
    <div class="shangchuan">
        <div class="s-one">
            <div class="s-one-qq">
                <img src="../../assets/images/searchuuy (1).png" alt="" class="s-one-w">
                <input type="text" placeholder="请输入企业名称" class="s-one-qqq">
                <div class="s-one-t">
                    <div class="s-one-e"></div>
                    <div class="s-one-r">搜索</div>
                </div>
            </div>
            <div class="qq" @click=" getName()">
        <div class="s-two">
            <div class="s-two-qq">
                <div class="s-two-q"> </div>
                <div class="s-two-w">
                    <div class="s-two-e"></div>
                    <div class="s-two-r">
                        
                        <div class="s-two-rr"></div>
                    </div>
                </div>
            </div>
            <div class="s-two-aa">
                <div class="s-two-a">
                    <div class="s-two-s">企业总数</div>
                    <div class="s-two-ss">{{ info.qyzs }}</div>
                </div>
                <div class=" s-two-a ">
                    <div class="s-two-s">未分配</div>
                    <div class="s-two-ss">{{ info.wfp }}</div>
                </div>
            </div>
            <div class="s-two-aa">
                <div class="s-two-a">
                    <div class="s-two-s">已跟进</div>
                    <div class="s-two-ss">{{ info.ygj }}</div>
                </div>
                <div class=" s-two-a ">
                    <div class="s-two-s">营销成功</div>
                    <div class="s-two-ss">{{ info.yxcg }}</div>
                </div>
            </div>
        </div>
    </div>
        </div>
     


    </div>
</template>
<script>

export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {
     
    },
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            uname1: '张三 2022-02-11创建',
            uname: [],
            tt: {
                0: '公司名单',
                1: '部门名单',
                2: '个人名单',
            },



        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() {
        const qq = this.getCoList()
        this.uname = qq.result
        this.uname.forEach((a, b) => {
            //   a.yy = this.tt[a.status]     
            if (a.status === 0) {
                a.yy = '公司名单'
            }
            if (a.status === 1) {
                a.yy = '部门名单'
            }
            if (a.status === 2) {
                a.yy = '个人名单'
            }

        })

    },
    mounted() {

    },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getCoList() {
            const data = {
                result: [
                    {
                        name: "高新技术企业",
                        qyzs: 208,
                        wfp: 28,
                        ygj: 12,
                        yxcg: 13,
                        status: 0,
                    },
                    {
                        name: "独角兽企业",
                        qyzs: 188,
                        wfp: 178,
                        ygj: 32,
                        yxcg: 23,
                        status: 1,
                    },
                    {
                        name: "瞪羚企业",
                        qyzs: 68,
                        wfp: 36,
                        ygj: 2,
                        yxcg: 3,
                        status: 2,
                    },
                ],
            };
            return data;
        },
    }
};
</script>
<style scoped lang="scss">
.shangchuan {
    width: 375px;
    height: 1200px;

    .s-one {
        height: 165px;
        width: 375px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('../../assets/images/dingbubeijing.png');
        overflow: hidden;

        .s-one-qq {
            height: 41px;
            background: #FFFFFF;
            border-radius: 6px;
            margin: 91px 13px 0 13px;
            display: flex;
            align-items: center;

            .s-one-w {
                height: 15px;
                width: 15px;
                margin-left: 15px;
            }

            .s-one-q {
                height: 15px;
                width: 15px;
                margin-left: 13px;
                border: 1px solid red;
            }

            .s-one-qqq {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #5F6269;
                margin-left: 8px;
            }

            .s-one-t {
                margin-left: auto;
                margin-right: 23px;
                display: flex;
                align-items: center;

                .s-one-e {
                    width: 1px;
                    height: 20px;
                    background: #C7C7C7;
                    margin-right: 18px;
                }
            }

        }

    }



}
</style>